<script setup>
const emits = defineEmits(['continue']);
const props = defineProps({
  question: {type: Object, required: true},
  userAnswer: {type: String, required: true}
});

// 继续答题
const clickContinue = () => {
  // 传递父组件事件
  emits('continue');
}
</script>

<template>
  <div class="index_container">
    <div class="inner_view">
      <div class="answer_box">
        <div class="answer_title">
          <p v-if="userAnswer===question.ranswer">正确！</p>
          <p v-else>答错啦！</p>
        </div>
        <div class="answer_content">
          <p class="ques_title">{{question.questionName}}</p>
          <p class="true_answer">正确答案: {{question.ranswer}}</p>
          <div class="answer_parsing">{{question.content}}</div>
        </div>
      </div>

      <div class="continue_btn">
        <button @click="clickContinue">继续答题</button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.index_container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);

  .inner_view {
    width: 100%;
    height: 100%;
    position: relative;

    .answer_box {
      position: relative;
      top: 45%;
      transform: translateY(-50%);
      margin: 0 50px;
      border-radius: 20px;
      border: 3px solid var(--cx-color1);
      background-color: #ffffff;

      .answer_title {
        p {
          color: var(--cx-color2);
          font-size: 50px;
          font-family: 华文行楷, serif;
          letter-spacing: 5px;
          font-weight: 600;
          text-align: center;
          line-height: 100px;
        }
      }

      .answer_content {
        height: 350px;
        overflow: auto;
        margin: 0 100px 25px;
        background-color: #ececec;
        border-radius: 7px;

        .ques_title {
          text-align: center;
          line-height: 100px;
          font-size: 25px;
          color: var(--cx-color2);
          font-weight: bold;
          letter-spacing: 3px;
        }

        .true_answer {
          text-align: center;
          font-size: 20px;
          letter-spacing: 3px;
          font-weight: bold;
          color: #90EE90;
        }

        .answer_parsing {
          text-align: center;
          font-size: 20px;
          letter-spacing: 3px;
          margin: 20px 200px 0;
          font-weight: bold;
          line-height: 30px;
        }
      }
    }

    .continue_btn {
      position: absolute;
      left: 50%;
      bottom: 60px;
      transform: translateX(-50%);

      button {
        width: 200px;
        height: 50px;
        border-radius: 50px;
        border: none;
        background-color: var(--cx-color3);
        color: #ffffff;
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 3px;
        cursor: pointer;
      }
    }
  }
}
</style>